<script setup lang='ts'>
import { ref, computed } from 'vue'
import type { Ref } from 'vue'
import type { iPro } from '../views/home/home'
import { useRouter } from 'vue-router'

const router = useRouter()

const { prolist } = defineProps({
    prolist: Array<iPro>
})

const iconName: Ref<string> = ref('list-switching')


function changeIconName() {
    // list-switching   list-switch
    // if(iconName.value == 'list-switching'){
    //     iconName.value = 'bars'
    // }else {
    //     iconName.value = 'list-switching'
    // }

    iconName.value = iconName.value == 'list-switching' ? 'bars' : 'list-switching'
}

const classType = computed(() => {
    return iconName.value == 'list-switching' ? 1 : 2
})

function goDetail(proid: string) {
    // 因为打开详情后要知道进入的是哪个商品，所以需要进行路由传参

    /*
        路由传参有以下两个方法
        方法一：params
            1. 在路由配置的时候添加 :proid     path: '/detail/:proid'
            2. 跳转页面的时候携带拼接参数       router.push('/detail/' + proid)
            3. 在进入的页面通过 useRoute 进行接收 const route = useRoute()
            4. 取出 route 中的参数            console.log(route.params.proid);

        方法二：query
            1. 通过 router.push({ path: '/detail' ,query:{} }) 传递对象的方式进行传参
            2. query 是一个对象，我们可以在对象中添加多个参数进行传递
            3. 在进入的页面中通过 useRoute 进行接收 const route = useRoute()
            4. 取出 route 中的参数            console.log(route.query.proid);

    */

    router.push({
        // path: '/detail',
        name: 'detail',
        query: {
            proid,
            name: '张三',
            age: 18
        }
    })
}

</script>
<template>
    <!-- cols_1: 代表的是左边图片右边内容 -->
    <ul :class="'proList cols_' + classType">
        <li class="proitem" @click='goDetail(item.proid)' v-for="item in prolist" :key="item.proid">
            <div class="itemImage">
                <van-image width="100%" height="100%" :src="item.img1" />
            </div>

            <div class="itemInfo">
                <div class="proname van-multi-ellipsis--l2">{{ item.proname }}</div>
                <div class="price">￥{{ item.originprice }}</div>
            </div>
        </li>

        <div class="changeIcon" @click='changeIconName'>
            <!-- <van-icon name="list-switch" /> list-switching -->
            <van-icon size='30' :name="iconName" />
        </div>
    </ul>
</template>
<style lang="scss" scoped>
/* 左边图右边文 */
.cols_1 .proitem {
    height: 1rem;
    display: flex;
    border-bottom: 1px solid #ccc;

    .itemImage {
        width: 1rem;
        height: 1rem;
        padding: 14px;
        box-sizing: border-box;
    }

    .itemInfo {
        flex: 1;

        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding: 10px;

        .proname {
            font-size: 14px;
            font-weight: 500;
        }

        .price {
            color: #f66;
            font-weight: 700;
        }
    }
}

/* 上边图下边文 */
.cols_2 {
    display: flex;
    flex-wrap: wrap;
}

.cols_2 .proitem {
    width: 48%;
    margin: 0 1%;
    border: 1px solid #ccc;
    box-sizing: border-box;

    .itemImage {
        width: 100%;
        height: 2rem;
    }

    .itemInfo {
        line-height: 22px;
        padding: 5px 10px;
        box-sizing: border-box;

        .proname {
            font-size: 14px;
            font-weight: 500;
        }

        .price {
            color: #f66;
            font-weight: 700;
        }
    }
}


.changeIcon {
    position: fixed;
    right: 10px;
    bottom: 66px;
    border: 1px solid #f66;
    padding: 4px;
    border-radius: 50%;
    background-color: white;
}
</style>